<template>
	<view>
		<my-animation :share="share" :height="animationHeight" @display="display" :borderRadius="borderRadius">
			<template v-slot:spOne>
				<view class="list">
					<view class="con" @click="gotoSearch">
						<text>添加好友</text>
					</view>
					<view class="con" @click="gotoCreateGroup">
						<text>创建群组</text>
					</view>
					<view class="con-zw"></view>
					<view class="con" @click="display">
						<text>取消</text>
					</view>
				</view>
			</template>
		</my-animation>
	</view>
</template>

<script>
	import myAnimation from '@/components/common/my-animation/my-animation.vue'

	export default {
		props: ['share'],
		components: {
			myAnimation
		},
		data() {
			return {
				animationHeight: '330',
				borderRadius: '30rpx 30rpx 0 0'
			}
		},
		methods: {
			// 隐藏分享
			display() {
				this.$emit('display', this.share)
			},
			//跳转搜索页面，搜索好友账号
			gotoSearch(){
				return uni.navigateTo({
					url: '/pages/msg/search/search'
				})
			},
			//跳转创建群聊页面
			gotoCreateGroup(){
				return uni.navigateTo({
					url: '/pages/msg/create-group/create-group'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.con {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 32rpx;

		&:active {
			background-color: #CBCBCB;
		}
	}

	.con-zw {
		width: 100%;
		height: 30rpx;
		background-color: #F7F7F7;
	}
</style>